<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>

<style type="text/css" rel="stylesheet">
    #preview {
        display: none;
        position: absolute;
        top: 100px;
    }
</style>

<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/engine.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/interface/QuestionSetService.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/script/questionSet/main.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/script/questionSet/QuestionSet.js"></script>
<script type="text/javascript">
    var qsId = null;
    var qsStatus = null;
    var qsAvailability = null;
    var qsTitle = null;

    function getQuestionInfos(id, status, availability, title) {
        qsId = id;
        qsStatus = status;
        qsAvailability = availability;
        qsTitle = title;
    }

    function remove() {
        if (itemParams == "") {
            alert("Please choose a Page");
        } else {
            var flag = confirm("Are you sure you want to delete this Page?");
            if (flag)
                QuestionSetService.remove(qsId, actionMessage);                
            else
                $("div.error h3").html("Action Cancelled");
        }

        function actionMessage(message) {
            if (message == 'action.success') {
                $("div.error h3").html("Page has been deleted");
                $("#" + qsId).remove();
                itemParams = "";
            } else {
                $("div.error h3").html(message);
            }
        }
    }

    function retire() {
        if (qsStatus == "retired") {
            $("div.error h3").html("This action not available; Page is in Retired Status");
        } else {
            clickAction("retire");
        }
    }

    function createLink() {
        window.location.href = "create.html?from=" + escape(window.location.href);
    }

    $(document).ready(function() {
        sort();

        $("#editBtn").click(function () {
            clickAction('edit');
            return false;
        });

        // New Version Button, Click Event.
        $("#nvBtn").click(function () {
            clickAction('newversion');
            return false;
        });

        // Copy Button, Click Event.
        $("#copyBtn").click(function () {
            clickAction('copy');
            return false;
        });

        $("#retireBtn").click(function() {
            retire();
        });

        $("#previewBtn").click(function() {
            if (itemParams != "") {
                preview(qsId, qsTitle);
            } else {
                alert("Please select an item.");
            }
        });

        $(".previewCloseBtn").click(function() {
            $("#preview").hide();
        });
    });

    function closePopup() {
        $("#preview").hide();
    }
</script>

<!-- Menu -->
<jsp:include page="menu.jsp"/>

<!--START: conent -->
<div class="content">
    <div class="insider">
        <div class="search_box">
            <form action="search.html" method="get">
                <ul class="fl">
                    <li>
                        <select name="availability">
                            <option value="">Availability:All</option>
                            <option value="locked" ${param.availability == "locked" ? "selected" : ""}>
                                locked
                            </option>
                            <option value="open" ${param.availability == "open" ? "selected" : ""}>
                                open
                            </option>
                        </select>
                    </li>

                    <security:authorize ifNotGranted="ROLE_PORTAL_USER">
                        <li>
                            <select name="user">
                                <option value="">User:All</option>
                                <c:forEach var="user" items="${users}">
                                    <option value="${user.username}" ${param.user == user.username ? "selected" : ""}>
                                            ${user.username}
                                    </option>
                                </c:forEach>
                            </select>
                        </li>
                        <li></li>
                        <li></li>
                    </security:authorize>

                    <li>
                        <select name="status">
                            <option value="">Status:All</option>
                            <option value="active" ${param.status == "active" ? "selected" : ""}>
                                active
                            </option>
                            <option value="retired" ${param.status == "retired" ? "selected" : ""}>
                                retired
                            </option>
                        </select>
                    </li>

                    <security:authorize ifAnyGranted="ROLE_SYS_ADMIN">
                        <li>
                            <select name="group">
                                <option value="">Groups:All</option>
                                <c:forEach var="group" items="${groups}">
                                    <option value="${group.name}" ${param.group == group.name ? "selected" : ""}>
                                            ${group.name}
                                    </option>
                                </c:forEach>
                            </select>
                        </li>
                    </security:authorize>

                    <li class="word_box">
                        <input type="text" id="keywords" name="keywords" onclick="searchClean(this)"
                               value="${empty param.keywords ? 'Search by Keywords...' : param.keywords}"/>
                    </li>
                </ul>
                <ul class="fr">

                    <li>
                        <input type="image" class="btn" onclick="searchClean($('#keywords'));"
                               src="<%= request.getContextPath()%>/images/btn/btn_search3.gif"/>
                    </li>
                </ul>
            </form>
        </div>

        <div class="error">
            <h3>${message}<br/>${param.message}</h3>

            <div class="display_mode">
                <h4>Display mode:</h4>
                <ul>
                    <li id="brief" onclick="briefMode();"><a href="#">Brief</a></li>
                    <li id="full" class="active" onclick="fullMode();"><a href="#">Full</a></li>
                </ul>
            </div>
        </div>

        <!-- Menu -->
        <jsp:include page="../common/questionFunction.jsp"/>

        <table width="100%" cellspacing="0" class="data_thead">
            <thead>
            <tr>
                <th width="15%" column="name"
                    class="${(column == 'name' and order=='asc')?'id_move_up' : (column == 'name' and order=='desc')?'id':''} sort">
                    Name
                </th>
                <th width="11%" column="refId"
                    class="${(column == 'refId' and order=='asc')?'id_move_up' : (column == 'refId' and order=='desc')?'id':''} sort">
                    ID
                </th>
                <th width="10%" column="version"
                    class="${(column == 'version' and order=='asc')?'id_move_up' : (column == 'version' and order=='desc')?'id':''} sort">
                    Version
                </th>
                <th width="9%" column="status.code"
                    class="${(column == 'status.code' and order=='asc')?'id_move_up' : (column == 'status.code' and order=='desc')?'id':''} sort">
                    Status
                </th>
                <th width="13%" column="availability.code"
                    class="${(column == 'availability.code' and order=='asc')?'id_move_up' : (column == 'availability.code' and order=='desc')?'id':''} sort">
                    Availability
                </th>
                <th width="42%" column="displayTitle"
                    class="${(column == 'displayTitle' and order=='asc')?'id_move_up' : (column == 'displayTitle' and order=='desc')?'id':''} end sort">
                    Title
                </th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <div id="dataList" class="data_tbody">
            <c:forEach var="questionSet" items="${questionSets}">
                <div id="${questionSet.questionSetId}" onclick="QuestionSet.itemClick(this, 'id=${questionSet.questionSetId}');
                     getQuestionInfos(${questionSet.questionSetId},'${questionSet.status.name}', '${questionSet.availability.name}','${questionSet.displayTitle}');"
                     onmouseover="itemHover(this);" onmouseout="itemMouseOut(this);" status="${questionSet.status.code}" 
                     involvedNum="${fn:length(questionSet.quesitonSetInNaires)}" availability="${questionSet.availability.code}">
                    <table width="100%" cellspacing="0" class="data_tbody_title">
                        <tbody>
                        <tr>
                            <td width="15%" class="id_number">${questionSet.name}</td>
                            <td width="11%" class="id_number">${questionSet.refId}</td>
                            <td width="10%">${questionSet.version}</td>
                            <td width="9%">${questionSet.status.code}</td>
                            <td width="13%">${questionSet.availability.code}</td>
                            <td width="42%">${questionSet.displayTitle}</td>
                        </tr>
                        <tr>
                            <td colspan="5" class="tro"></td>
                        </tr>
                        </tbody>
                    </table>
                    <table border="0" cellspacing="0" class="tro" width="800">
                        <tr>
                            <td width="220">User: <strong>${questionSet.modifiedBy.username}</strong></td>
                            <td width="220">
                                Last modified:
                                <strong>
                                    <fmt:formatDate value="${questionSet.modifiedOn}" pattern="MM/dd/yyyy"/>
                                </strong>
                            </td>
                            <td width="250" class="end">Name: <strong>${questionSet.name}</strong></td>
                        </tr>
                        <tr>
                            <td colspan="1">${questionSet.description}</td>
                            <td class="end">Vocabulary Name: <strong>${questionSet.vocabularyname}</strong></td>
                        </tr>
                    </table>
                </div>
            </c:forEach>
        </div>

        <!-- Pagination -->
        <%@include file="../../template/pager.jsp" %>
    </div>
</div>
<!--END: conent -->
<!--START: Footer -->
<div class="footer"></div>
<!--END: Footer -->

<!-- Question Set Preview -->
<jsp:include page="previewFrame.jsp"/>